<template>
		<view class="orderBox">
			<view class="order-item" v-for="order in this.orderList" :key="order.id">
				<view class="title">
					<text class="add-name">益田假日天地GO店</text>
					<view class="status"><text>{{statusMap(order.status)}}</text> <u-icon name="arrow-right"></u-icon></view>
				</view>
				<view class="order-img" @tap="goOneOrder(order.id)">
					<template v-for="img in order.goods_info">
						<image :src="img.s_goods_photos[0].path" mode=""></image>
					</template>
				</view>
				<view class="order-info">
					<view class="order-content">
						<text class="order-num">订单编号：{{order.order_id}}</text>
						<text class="order-time">下单时间：{{order.createdAt}}</text>
					</view>
					<u--text mode="price" :text="order.total_price"></u--text>
				</view>
				<view class="order-btn">
					<u-button type="warning" :plain="true" text="删除订单" @tap="delOrder(order.id)"></u-button>
				<!-- 	<u-button type="warning" :plain="true" text="镂空"></u-button>
					<u-button type="warning" :plain="true" text="镂空"></u-button> -->
				</view>
			</view>
		</view>
</template>

<script>
	import {getOrderApi} from '@/service/index.js'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				history:[],
				orderList:[]
			};
		},
		onLoad() {
			this.history=uni.getStorageSync('orderList')
			this.history.forEach(ele=>{
				let data=JSON.parse(ele.goods_info)
				ele.goods_info=data
				this.orderList.push(ele)
			})
			// console.log(this.orderList);
		},
		methods:{
			...mapActions('order',['delOrderList']),
			// 状态映射
			statusMap(status){
			  if(status==='0'||status==='7'){
			    return '交易关闭'
			  }else if(status==='1'){
			    return '等待买家付款'
			  }else if(status==='2'){
			    return '等待卖家发货'
			  }else if(status==='3'){
			    return '待收货'
			  }else if(status==='6'){
			    return '待评价'
			  }
			},
			// 去订单单条信息
			goOneOrder(id){
				this.getOrder(id)
			},
			// 获取订单单条信息
			async getOrder(id){
				let res=await getOrderApi(id)
				// console.log(res);
				if(res.statusCode===200){
					uni.setStorageSync('orderInfo',res.data.result)
					uni.navigateTo({
						url:'/subpackage/orderinfo/orderinfo'
					})
				}
			},
			// 删除订单
			delOrder(id){
				this.delOrderList(id)
			}
		}
	}
</script>

<style lang="scss">
.orderBox{
		padding: 20rpx;
		min-height: 90vh;
		width: 100%;
		background-color: #f1f8fa;
		box-sizing: border-box;
		.order-item{
			padding: 30rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width: 710rpx;
			height: 426rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.add-name{
					font-size: 28rpx;
					color: #343434;
				}
				.status{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					color: #666;
					// width: 120rpx;
				}
			}
			.order-img{
				margin: 30rpx auto;
				// width: 670rpx;
				height: 112rpx;
				// background-color: skyblue;
				image{
					width: 150rpx;
					height: 112rpx;
				}
			}
			.order-info{
				display: flex;
				.order-content{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.order-num,.order-time{
						font-size: 26rpx;
						color: #666;
					}
				}
			}
			.order-btn{
				height: 66rpx;
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-top: 30rpx;
				.u-button--plain{
					margin: 0;
					margin-left: 10rpx;
					width: 154rpx;
					height: 66rpx;
				}
			}
		}
	}
</style>
